<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布服务</title>
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="../favicon.ico">
    <link rel="icon" type="image/png" href="../images/logo.png">
    
    <script src="../js/tailwindcss-3.4.17.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#10b981',
                        'primary-dark': '#059669',
                        secondary: '#3b82f6',
                        accent: '#f59e0b',
                        danger: '#ef4444',
                        neutral: '#f9fafb',
                        'text-primary': '#1f2937',
                        'text-secondary': '#6b7280'
                    }
                }
            }
        }
    </script>
    <link rel="stylesheet" href="../css/all.min.css">
    <link rel="stylesheet" href="../css/common.css">
</head>
<body class="bg-neutral">
    <div class="container-app">
        <!-- 顶部导航栏 -->
        <header class="bg-white sticky top-0 z-10 border-b border-gray-100 shadow-soft">
            <div class="px-4 py-3 flex items-center gap-3">
                <button onclick="window.history.back()" class="w-8 h-8 rounded-lg hover:bg-gray-100 flex items-center justify-center transition-colors">
                    <i class="fa fa-arrow-left text-text-primary"></i>
                </button>
                <h1 class="text-base font-bold flex-1 text-text-primary">发布服务</h1>
                <button onclick="saveDraft()" class="text-xs text-primary hover:underline">保存草稿</button>
            </div>
        </header>
        
        <!-- 表单内容 -->
        <main class="px-4 py-4 pb-24">
            <form id="publish-service-form" class="space-y-4">
                <!-- 服务名称 -->
                <div class="card-modern p-4">
                    <label class="block text-sm font-bold text-text-primary mb-2">
                        服务名称 <span class="text-danger">*</span>
                    </label>
                    <input type="text" name="serviceName" required
                           placeholder="请输入服务名称，如：专业农机耕地服务"
                           class="w-full px-3 py-2.5 bg-neutral rounded-lg text-sm border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                </div>

                <!-- 服务分类 -->
                <div class="card-modern p-4">
                    <label class="block text-sm font-bold text-text-primary mb-2">
                        服务分类 <span class="text-danger">*</span>
                    </label>
                    <select name="serviceCategory" required
                            class="w-full px-3 py-2.5 bg-neutral rounded-lg text-sm border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                        <option value="">请选择服务分类</option>
                        <option value="办公场地">办公场地</option>
                        <option value="金融贷款">金融贷款</option>
                        <option value="劳务派遣">劳务派遣</option>
                        <option value="物流代办">物流代办</option>
                        <option value="集采代购">集采代购</option>
                        <option value="农产代销">农产代销</option>
                        <option value="农机服务">农机服务</option>
                        <option value="技术培训">技术培训</option>
                        <option value="其他">其他</option>
                    </select>
                </div>

                <!-- 服务介绍（一句话） -->
                <div class="card-modern p-4">
                    <label class="block text-sm font-bold text-text-primary mb-2">
                        服务介绍 <span class="text-danger">*</span>
                    </label>
                    <input type="text" name="serviceIntro" required maxlength="50"
                           placeholder="请用一句话介绍您的服务（50字以内）"
                           class="w-full px-3 py-2.5 bg-neutral rounded-lg text-sm border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                    <p class="text-xs text-text-secondary mt-1.5">这将显示在服务列表中，请简洁明了</p>
                </div>

                <!-- 服务内容（详细描述） -->
                <div class="card-modern p-4">
                    <label class="block text-sm font-bold text-text-primary mb-2">
                        服务内容 <span class="text-danger">*</span>
                    </label>
                    <textarea name="serviceContent" required rows="6"
                              placeholder="请详细描述您的服务内容，包括服务范围、服务优势、服务流程等"
                              class="w-full px-3 py-2.5 bg-neutral rounded-lg text-sm border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all resize-none"></textarea>
                    <p class="text-xs text-text-secondary mt-1.5">详细的服务说明有助于提高咨询量</p>
                </div>

                <!-- 服务价格 -->
                <div class="card-modern p-4">
                    <label class="block text-sm font-bold text-text-primary mb-2">
                        服务价格 <span class="text-danger">*</span>
                    </label>
                    <div class="flex gap-2 items-center">
                        <input type="text" name="servicePrice" required
                               placeholder="如：200/亩、3000/月"
                               class="flex-1 px-3 py-2.5 bg-neutral rounded-lg text-sm border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                        <label class="flex items-center gap-2 whitespace-nowrap">
                            <input type="checkbox" name="priceNegotiable" class="w-4 h-4 text-primary rounded">
                            <span class="text-sm text-text-secondary">价格面议</span>
                        </label>
                    </div>
                </div>

                <!-- 宣传图片 -->
                <div class="card-modern p-4">
                    <label class="block text-sm font-bold text-text-primary mb-2">
                        宣传图片
                    </label>
                    <div class="grid grid-cols-3 gap-2">
                        <div class="aspect-square rounded-lg border-2 border-dashed border-gray-300 flex flex-col items-center justify-center cursor-pointer hover:border-primary transition-colors" onclick="document.getElementById('image-upload').click()">
                            <i class="fa fa-camera text-2xl text-gray-400 mb-1"></i>
                            <span class="text-xs text-text-secondary">上传图片</span>
                        </div>
                    </div>
                    <input type="file" id="image-upload" accept="image/*" multiple class="hidden">
                    <p class="text-xs text-text-secondary mt-1.5">最多上传9张图片，建议尺寸800x800px</p>
                </div>

                <!-- 服务地区 -->
                <div class="card-modern p-4">
                    <label class="block text-sm font-bold text-text-primary mb-2">
                        服务地区 <span class="text-danger">*</span>
                    </label>
                    <input type="text" name="serviceLocation" required
                           placeholder="如：浙江杭州、江苏全省"
                           class="w-full px-3 py-2.5 bg-neutral rounded-lg text-sm border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                </div>

                <!-- 联系人信息 -->
                <div class="card-modern p-4">
                    <h3 class="text-sm font-bold text-text-primary mb-3 flex items-center">
                        <i class="fa fa-user-circle text-primary mr-2"></i>
                        联系人信息
                    </h3>
                    
                    <div class="space-y-3">
                        <div>
                            <label class="block text-sm text-text-secondary mb-1.5">
                                联系人 <span class="text-danger">*</span>
                            </label>
                            <input type="text" name="contactName" required
                                   placeholder="请输入真实姓名"
                                   class="w-full px-3 py-2.5 bg-neutral rounded-lg text-sm border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                        </div>
                        
                        <div>
                            <label class="block text-sm text-text-secondary mb-1.5">
                                联系电话 <span class="text-danger">*</span>
                            </label>
                            <input type="tel" name="contactPhone" required pattern="[0-9]{11}"
                                   placeholder="请输入11位手机号"
                                   class="w-full px-3 py-2.5 bg-neutral rounded-lg text-sm border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                            <p class="text-xs text-text-secondary mt-1.5">
                                <i class="fa fa-shield mr-1"></i>
                                您的联系方式将脱敏显示，如：张** 138****5678
                            </p>
                        </div>
                    </div>
                </div>

                <!-- 服务协议 -->
                <div class="card-modern p-4">
                    <label class="flex items-start gap-2">
                        <input type="checkbox" name="agreement" required class="mt-1 w-4 h-4 text-primary rounded">
                        <span class="text-xs text-text-secondary flex-1">
                            我已阅读并同意 <a href="#" class="text-primary hover:underline">《服务发布协议》</a> 和 <a href="#" class="text-primary hover:underline">《平台使用规范》</a>，承诺发布的信息真实有效
                        </span>
                    </label>
                </div>
            </form>
        </main>
        
        <!-- 底部操作按钮 -->
        <div class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white border-t border-gray-200 p-4 shadow-xl z-20">
            <div class="flex gap-3">
                <button type="button" onclick="previewService()" 
                        class="flex-1 py-3 bg-gray-100 text-text-primary rounded-xl font-medium hover:bg-gray-200 transition-colors">
                    预览
                </button>
                <button type="submit" form="publish-service-form"
                        class="flex-1 py-3 bg-primary hover:bg-primary-dark text-white rounded-xl font-medium transition-colors shadow-medium">
                    发布服务
                </button>
            </div>
        </div>
    </div>
    
    <script src="../js/common.js"></script>
    <script src="../js/animate.js"></script>
    <script>
        // 表单提交处理
        document.getElementById('publish-service-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 验证表单
            const formData = new FormData(this);
            
            // 检查是否同意协议
            if (!formData.get('agreement')) {
                alert('请先阅读并同意服务发布协议');
                return;
            }
            
            // 模拟提交
            const submitBtn = this.querySelector('button[type="submit"]');
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>发布中...';
            
            // 模拟API请求
            setTimeout(() => {
                alert('服务发布成功！审核通过后将在服务市场展示');
                window.location.href = 'my-posts.html';
            }, 1500);
        });
        
        // 保存草稿
        function saveDraft() {
            const formData = new FormData(document.getElementById('publish-service-form'));
            localStorage.setItem('service-draft', JSON.stringify(Object.fromEntries(formData)));
            alert('草稿已保存');
        }
        
        // 预览服务
        function previewService() {
            const formData = new FormData(document.getElementById('publish-service-form'));
            
            if (!formData.get('serviceName')) {
                alert('请先填写服务名称');
                return;
            }
            
            // 保存到 sessionStorage 用于预览
            sessionStorage.setItem('preview-service', JSON.stringify(Object.fromEntries(formData)));
            window.open('service-detail.html?preview=1', '_blank');
        }
        
        // 图片上传处理
        document.getElementById('image-upload').addEventListener('change', function(e) {
            const files = e.target.files;
            if (files.length > 9) {
                alert('最多只能上传9张图片');
                return;
            }
            
            // 这里可以添加图片预览逻辑
            console.log('选择了', files.length, '张图片');
        });
        
        // 页面加载时检查权限并恢复草稿
        window.addEventListener('DOMContentLoaded', async function() {
            // 初始化Token
            CommonUtils.initToken();
            
            // 检查商户权限
            const hasPermission = await CommonUtils.checkMerchantRequired(null, '发布服务');
            if (!hasPermission) {
                // 如果没有权限，延迟返回前一页
                setTimeout(() => {
                    window.history.back();
                }, 2000);
                return;
            }
            
            // 恢复草稿
            const draft = localStorage.getItem('service-draft');
            if (draft) {
                const confirmed = confirm('检测到未完成的草稿，是否恢复？');
                if (confirmed) {
                    const data = JSON.parse(draft);
                    const form = document.getElementById('publish-service-form');
                    Object.keys(data).forEach(key => {
                        const input = form.querySelector(`[name="${key}"]`);
                        if (input) {
                            if (input.type === 'checkbox') {
                                input.checked = data[key] === 'on';
                            } else {
                                input.value = data[key];
                            }
                        }
                    });
                }
            }
        });
    </script>
</body>
</html>

